<!-- 总体布局 -->

<template>
    <!-- 总容器 -->
    <div class="container">
        <!-- 上容器 -->
        <div class="container-top">
            <TopBar />
        </div>
        <!-- 下容器 -->
        <div class="container-bottom">
            <!-- 左容器 -->
            <div class="container-left">
                <LeftBar />
            </div>
            <!-- 右容器 -->
            <div class="container-right">
                <MainContent />
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import TopBar from './components/TopBar.vue'
import LeftBar from './components/LeftBar.vue'
import MainContent from './components/MainContent.vue'

export default {
    name: 'App',
    components: { TopBar, LeftBar, MainContent }  // 注册组件
}
</script>

<style scoped>
.container {
    width: 100%;
    height: 100vh;
    background-color: aquamarine
}

/* 高度：60px */
.container-top {
    width: 100%;
    height: 60px;
    background-color: chartreuse;
}

.container-bottom {
    width: 100%;
    height: calc(100vh - 60px);
    background-color: blue;
}

/* 宽度：180px */
.container-left {
    width: 180px;
    height: calc(100vh - 60px);
    float: left;
    background-color: red;
}

.container-right {
    width: calc(100% - 180px);
    height: calc(100vh - 60px);
    float: left;
    background-color: #ececec
}
</style>